<!-- 模块说明 -->
<style lang="scss" scoped>
  .timingButton {
    margin-left: 10px;
  }
</style>

<template>
  <div>
    <el-button type="danger" class="timingButton" @click="click" :disabled="text!='获取验证码'">
      {{ text }}
    </el-button>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
const props = defineProps({
  onClick: Function
})
const text = ref('获取验证码')
let timer = null
const click = () => {
  props.onClick().then(() => {
    let timing = 59
    text.value = '60秒后可再次获取'
    timer = setInterval(() => {
      if (timing == 0) {
        text.value = '获取验证码'
        clearInterval(timer)
      } else {
        text.value = timing + '秒后可再次获取'
        timing--
      }
    }, 1000)
  })
  
}
onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>